<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="" />
		<meta name="viewport" content="width=device-width" />
		<title>【例 3-8】v-bind 指令扩展 01</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			/* 定义一个名为 active 的样式类，设置边框、文本对齐和文字颜色 */
			.active {
				border: 1px solid red;
				text-align: center;
				color: #fff
			}

			/* 定义一个名为 error 的样式类，设置背景颜色 */
			.error {
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 动态应用 activeCls 和 errorCls 样式类 -->
			<div :class="[activeCls, errorCls]">测试文本</div>
		</div>
		<script>
			/* 创建一个名为 app 的 Vue 实例 */
			var app = new Vue({
				el: '#app', // 指定 Vue 实例挂载的元素
				data: { // 定义数据
					activeCls: 'active', // 样式类名
					errorCls: 'error' // 样式类名
				}
			});
		</script>
	</body>
</html>